'use client'

import React from 'react'
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Badge } from '@/components/ui/badge'

const ColorShowcase = () => {
  return (
    <div className="space-y-10 p-6">
      {/* 主要颜色系统展示 */}
      <section>
        <h2 className="text-2xl font-bold mb-6">主要颜色系统</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Primary 色系 */}
          <Card>
            <CardHeader>
              <CardTitle>Primary 主色系统</CardTitle>
              <CardDescription>用于重要操作和关键信息</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Button>默认按钮</Button>
                <Button variant="outline">轮廓按钮</Button>
                <span className="text-primary">主要文本</span>
                <Badge variant="default">Primary Badge</Badge>
              </div>
              <div className="h-20 bg-primary text-primary-foreground p-4">
                主色背景区域
              </div>
            </CardContent>
          </Card>

          {/* Secondary 色系 */}
          <Card>
            <CardHeader>
              <CardTitle>Secondary 次要色系统</CardTitle>
              <CardDescription>用于次要操作和辅助信息</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Button variant="secondary">次要按钮</Button>
                <Button variant="ghost">幽灵按钮</Button>
                <span className="text-secondary-foreground">次要文本</span>
                <Badge variant="secondary">Secondary Badge</Badge>
              </div>
              <div className="h-20 bg-secondary text-secondary-foreground p-4">
                次要色背景区域
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* 功能色展示 */}
      <section>
        <h2 className="text-2xl font-bold mb-6">功能色与状态色</h2>
        <div className="grid gap-6">
          {/* Destructive */}
          <Alert variant="destructive">
            <AlertTitle>危险操作警告</AlertTitle>
            <AlertDescription>
              展示 Destructive 颜色在警告信息中的应用
            </AlertDescription>
          </Alert>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Button variant="destructive">删除按钮</Button>
            <Badge variant="destructive">错误状态</Badge>
            <div className="bg-destructive text-destructive-foreground p-4 rounded">
              危险提示区域
            </div>
          </div>
        </div>
      </section>

      {/* 界面元素色展示 */}
      <section>
        <h2 className="text-2xl font-bold mb-6">界面元素色</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* 背景与文本 */}
          <Card className="bg-background">
            <CardHeader>
              <CardTitle>背景与文本</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <p className="text-foreground">默认文本颜色</p>
                <p className="text-muted-foreground">次要文本颜色</p>
                <div className="bg-muted p-4 rounded">柔和背景区域</div>
              </div>
            </CardContent>
          </Card>

          {/* 强调与装饰 */}
          <Card>
            <CardHeader>
              <CardTitle>强调与装饰</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <div className="bg-accent text-accent-foreground p-4 rounded">
                  强调区域
                </div>
                <div className="border-2 border-border p-4 rounded">边框示例</div>
                <div className="ring-2 ring-ring p-4 rounded">轮廓环示例</div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* 图表颜色展示 */}
      <section>
        <h2 className="text-2xl font-bold mb-6">数据可视化色板</h2>
        <Card>
          <CardContent className="pt-6">
            <div className="grid grid-cols-5 gap-4">
              {[1, 2, 3, 4, 5].map((i) => (
                <div
                  key={i}
                  className={`h-32 bg-chart-${i} rounded-lg p-4 text-white flex items-center justify-center`}
                >
                  Chart Color {i}
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </section>

      {/* 交互状态展示 */}
      <section>
        <h2 className="text-2xl font-bold mb-6">交互状态</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <Card>
            <CardHeader>
              <CardTitle>按钮状态</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <Button className="w-full">默认状态</Button>
              <Button className="w-full hover:bg-primary/90">悬停状态</Button>
              <Button className="w-full opacity-50 cursor-not-allowed">
                禁用状态
              </Button>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>输入框状态</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <input className="w-full p-2 border rounded" placeholder="默认状态" />
              <input
                className="w-full p-2 border rounded ring-2 ring-ring"
                placeholder="聚焦状态"
              />
              <input
                className="w-full p-2 border rounded opacity-50"
                placeholder="禁用状态"
                disabled
              />
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>链接状态</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <a href="#" className="text-primary">
                默认链接
              </a>
              <a href="#" className="text-primary hover:underline">
                悬停链接
              </a>
              <a href="#" className="text-muted-foreground">
                访问过的链接
              </a>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* 深色模式切换 */}
      <div className="fixed bottom-4 right-4">
        <Button
          variant="outline"
          onClick={() => {
            document.documentElement.classList.toggle('dark')
          }}
        >
          切换深色模式
        </Button>
      </div>
    </div>
  )
}

export default ColorShowcase
